<template>
  <div>
    <!-- 1. 匹配到数据：显示标签 -->
    <el-tag
      v-if="matchedItem"
      :type="matchedItem.tagClass || 'default'"
      :class="matchedItem.tagClass ? '' : 'default-tag'"
      :disable-transitions="true"
    >
      {{ matchedItem.dictLabel }}
    </el-tag>

    <!-- 2. 未匹配到数据且需要显示原始值：显示dictKey -->
    <span v-else-if="showValue" class="unmatched-value">
      {{ dictKey }}
    </span>

    <!-- 3. 未匹配且不显示原始值：显示默认占位符 -->
    <span v-else class="placeholder">--</span>
  </div>
</template>

<script setup>
import { computed, watch } from "vue";

// 定义 props，增加显示控制参数
const props = defineProps({
  // 要匹配的字典值（如 '1'、'2'）
  dictKey: {
    type: [String, Number], // 支持数字/字符串类型的key
    required: true,
  },
  // 字典数据列表（格式：[{dictValue, dictLabel, tagClass}, ...]）
  list: {
    type: Array,
    default: () => [],
  },
  // 未匹配时是否显示原始dictKey（默认显示）
  showValue: {
    type: Boolean,
    default: true,
  },
});

// 关键：用computed实时同步list变化，生成Map（替代原有的ref+初始化逻辑）
const dictMap = computed(() => {
  const map = new Map();
  // 确保list是数组（容错处理）
  if (Array.isArray(props.list)) {
    props.list.forEach((item) => {
      // 统一将dictValue转为字符串，避免数字/字符串类型不匹配（如 1 vs '1'）
      map.set(String(item.dictValue), item);
    });
  }
  return map;
});

// 匹配当前dictKey对应的字典项
const matchedItem = computed(() => {
  // 统一将dictKey转为字符串，与map的key保持一致
  return dictMap.value.get(String(props.dictKey));
});
</script>

<style scoped>
/* 未匹配值的样式 */
.unmatched-value {
  color: #666;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 占位符样式 */
.placeholder {
  color: #ccc;
  padding: 0 8px;
}

/* 默认标签样式（当没有tagClass时） */
.default-tag {
  background: #e9e9eb;
  color: #666;
}

/* 标签间距（可选） */
.el-tag {
  margin: 0 2px;
}
</style>